<template>
  <t-dialog
    :width="width ? width : '70%'"
    :visible="showDialog"
    confirmBtn="确定"
    @confirm="handleCancel"
    @close="handleCancel"
    :cancelBtn="false"
    preventScrollThrough
    placement="center"
  >
    <template #header>查看流水单</template>
    <FormTable
      rowKey="id"
      :footData="[{}]"
      tableMaxHeight="30vh"
      :tableData="pageData.tableData.slipList"
      :columns="slipColumns"
    >
      <template #operations>
        <t-descriptions>
          <t-descriptions-item label="已使用金额">{{
            newPrecision(pageData.tableData.creditUsed, 2)
          }}</t-descriptions-item>
          <t-descriptions-item label="剩余额度">
            {{ newPrecision(pageData.tableData.creditBalance, 2) }}</t-descriptions-item
          >
        </t-descriptions>
      </template>
    </FormTable>
  </t-dialog>
</template>

<script lang="tsx" setup>
// 框架和组件库
import { computed, reactive } from "vue";
import type { TableProps } from "tdesign-vue-next";

// 工具函数
import { newPrecision } from "@/utils/tools";
import { http } from "@/utils/fetch";

const props = defineProps(["width", "showDialog", "mode", "creditId"]);
const emits = defineEmits(["onCancel", "onConfirm"]);

const GET_LIST_PATH = "/slip/findSlipByCreditId";

const pageData = reactive({
  readOnly: false,
  loading: false,
  tableData: {} as Record<string, any>
});

const slipColumns = computed(
  () =>
    [
      {
        colKey: "type",
        title: "类型",
        width: 200,
        cell: (h, { row }) => {
          if (row.type === 0) {
            return "付款";
          } else if (row.type === 1) {
            return "还款";
          } else {
            return row.type;
          }
        }
      },
      {
        colKey: "orderNo",
        title: "订单编码",
        width: 200,
        foot: () => {
          return <b>合计</b>;
        }
      },
      {
        colKey: "amount",
        title: "金额",
        width: 200,
        cell: (h, { row }) => {
          return newPrecision(row.amount, 2);
        },
        foot: () => {
          return newPrecision(pageData.tableData.creditLimit, 2);
        }
      }
    ] as TableProps["columns"]
);

const findAllList = async () => {
  pageData.loading = true;
  const resultData = await http("GET", `${GET_LIST_PATH}?id=${props.creditId}`);
  if (resultData.code === 200) {
    pageData.tableData = resultData.data;

    pageData.loading = false;
  }
};

const handleCancel = () => {
  emits("onCancel");
};

findAllList();
</script>
